<template>
  <div class="main">
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="22" class="article-title">
            遇到的问题
          </el-col>
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
            
        </el-row>
        
      </div>
      <div class="tl">
        <div>使用组件:v-viwer</div>
        <div>安装：npm install v-viewer --save</div>
       
      </div>
      
      
      
  </div>
</template>

<script>

export default {
  name: 'hzjmain',
  props: {
    msg: String
  },
  data() {
    return {
      dialogImageUrl: '',
        dialogVisible: false,
      photo:[
          'https://scpic.chinaz.net/files/pic/pic9/202111/bpic24741.jpg',
          'https://scpic.chinaz.net/files/pic/pic9/202111/apic36711.jpg',
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100122420C335-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640338383&t=64affa647ebdad03df5f79930b39e3ee',
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ20QJS6-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640338383&t=2abfb63c151f3dab4e913601851e2d6e'
      ],
     
    }
  },
  methods:{
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        debugger
        console.log()
        // this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
